<template>
    <div>
        <NavigationBar></NavigationBar>
        <div class="container">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane name="latest">
                    <span slot="label">
                        最新题目
                        <span>
                            ({{ totalCount }})
                        </span>
                    </span>
                    <TrainInfo :id = 0></TrainInfo>
                </el-tab-pane>
                <el-tab-pane v-for="subjectData in subjectCategoryList" :key="subjectData.id">
                    <span slot="label">
                        {{ subjectData.categoryName }} 
                        <span>
                            ({{ subjectData.count }})
                        </span>
                    </span>
                    <TrainInfo :id = "subjectData.id"></TrainInfo>
                </el-tab-pane>
            </el-tabs>
            
        </div>
        <el-backtop :visibility-height="200" />
    </div>
</template>

<script>
import NavigationBar from '@/components/NavigationBar.vue';
import TrainInfo from '@/components/TrainInfo.vue';
import TrainInfoApi from '@/api/trainInfo';

export default {
    components: {
        NavigationBar,
        TrainInfo,
    },
    data() {
        return {
            activeName: 'latest',
            parentId: 0, // 当前题目id
            totalCount: 0, // 总题目数
            subjectCategoryDTO: {},
            subjectCategoryList: [],
        };
    },
    methods: {
        // methods here
        handleClick(tab, event) {
            console.log("tab:", tab);
            console.log("event:", event);
        },
        async queryPrimaryCategory(subjectCategoryDTO) {
            try {
                const res = await TrainInfoApi.queryPrimaryCategory(subjectCategoryDTO);// 传入当前页数据
                this.subjectCategoryList = res; // 将获取的数据存储在组件的状态中
                this.totalCount = res.reduce((acc, cur) => acc + cur.count, 0); // 计算总题目数
            } catch (error) {
                console.error('获取数据失败:', error); // 异常处理
            }
        }
        
    },
    mounted() {
        // mounted here
        this.subjectCategoryDTO = {"categoryType": 1}; // 传入当前页数据
        this.queryPrimaryCategory(this.subjectCategoryDTO); // 调用获取数据的方法
    }
}
</script>

<style scoped>
.container {
    margin-top: 20px;
    margin-left: 200px;
    margin-right: 200px;
    border: 2px solid #f2f2f2;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.study-pagination {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}
</style>
